<template>
    <!--菜单导航栏-->
    <!-- {{ $router.options.routes }} -->
    <el-menu active-text-color="#ffd04b" background-color="#1d6c9b" class="el-menu-vertical-demo"
        :default-active="$route.path" text-color="#fff" :router="true">
        <!--模板插槽-->
        <template v-for="item in $router.options.routes">
            <el-menu-item :index="item.path"
                v-if="item.children === undefined && item.meta ? item.meta.show == true : ''">
                <!--动态获取图标-->
                <component :is="item.meta ? item.meta.icon : ''" class="icon"></component>
                <span>{{item.meta ? item.meta.title : ''}}</span>
            </el-menu-item>
            <!--二级菜单的判定-->
            <el-sub-menu :index="item.path"
                v-if="item.children != undefined && item.meta ? item.meta.show == true : ''">
                <template #title>
                    <component :is="item.meta ? item.meta.icon : ''" class="icon"></component>
                    <span>{{ item.meta ? item.meta.title : '' }}</span>
                </template>
                <el-menu-item-group>
                    <template v-for="child in item.children">
                        <el-menu-item :index="child.path" v-if="child.meta ? child.meta.show == true : ''">
                            <component :is="child.meta ? child.meta.icon : ''" class="icon"></component>
                            <span>{{ child.meta ? child.meta.title : '' }}</span>
                        </el-menu-item>
                    </template>
                </el-menu-item-group>
            </el-sub-menu>
        </template>
    </el-menu>
</template>
<script lang="ts" setup>



</script>
<style scoped>

 .el-menu-vertical-demo:not(.el-menu--collapse) {
     width: 200px;
     min-height: calc(100vh - 50px);
 }

 .el-menu-item  > span {
    font-size: 16px;
    font-weight: 700;
    /* color: white; */
    margin-left: 6px;
}
.el-sub-menu__title > span {
    font-size: 17px;
    font-weight: 700;
    /* color: white; */
    margin-left: 6px;

 }
 /* .el-menu-item-group .el-menu-item{
    font-size: 16px;
    color: white;
 } */
 .icon{
    width: 20px;
    height: 20px;
    margin-right: 6px;

 }

</style>